<!-- //前端： https://gitee.com/qq2759826672/hrms-front-end.git -->
<!-- 后端： https://gitee.com/qq2759826672/hrms-backend.git -->

<template>
  <div>
    <div id="main" style="width: 500px; height: 500px;" ref="main">
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Qs from 'qs'

  export default {
    name: 'chart3',
    data() {
      return {
        nameBar: [],
        valueBar: [],
      }
    },
    mounted() {
      this.drawLine();
    },

    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        var mythis = this;
        axios({
          method: 'get',
          url: 'http://localhost:8080/employee/countAge',
        }).then(function(rs) {
          let myChart = mythis.$echarts.init(mythis.$refs.main);
          // 绘制图表
          myChart.setOption({
            xAxis: {
              type: 'category',
              data: mythis.initBarName(rs.data, 'name', 'value'),
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'item',
            },
            title: {
              text: '员工年龄分布',
              left: 'center',
            },
            series: [{
              barWidth: 60,
              itemStyle: {
                color: '#00C1BE'
              },
              data: mythis.initBarValue(rs.data, 'name', 'value'),
              type: 'bar'
            }]
          });
        })
      },
      initBarValue(data, name, value) {
        let barValue = [];
        data.forEach(item => {
          let outValue = {};
          outValue.value = item.value;
          barValue.push(outValue);
        });
        this.valueBar = barValue;
        return barValue
      },
      initBarName(data, name, value) {
        let barName = [];

        data.forEach(item => {
          barName.push(item.name);
        });
        return barName
      }
    }
  }
</script>

<style>
</style>
